<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>富豪榜</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <nav>
      <ul>
        <li>主页</li>
        <li>排行榜</li>
        <li>联系方式</li>
      </ul>
    </nav>
    <!-- 头部内容 -->

    <header>
      <!-- 导航栏的按钮 -->
      <button id="toggle">导航栏</button>
      <!-- 标题 -->
      <h2>欢迎来到富豪排行榜</h2>
      <!-- 欢迎语句 -->
      <p>weclome to the rich rank</p>
      <!-- 登陆按钮 -->
      <button id="login">登陆</button>
    </header>
    <!-- 主题内容 -->
    <div class="container">
      <!-- 左盒子 -->
      <aside>
        <!-- 五个按钮 -->
        <button id="add-user">添加账户</button>
        <button id="double">资金翻倍</button>
        <button id="show-millionaire">查询百万富翁</button>
        <button id="sort">财富榜</button>
        <button id="calculate">计算总额</button>
      </aside>
      <!-- 右盒子 -->
      <main id="main">
        <h2>
          <strong>Person</strong>
          <span>Wealth</span>
        </h2>
      </main>
    </div>
    <script src="./index.js"></script>
    <script>
      let tog = document.querySelector("#toggle");
      let nav = document.querySelector("nav");
      let sum = 0;
      var arr = [];
      var i = 0;
      tog.addEventListener("click", function () {
        // nav.classList.toggle("li");
        // tog.classList.toggle("show_nav");
        document.body.classList.toggle("show_nav");
      });
      //更新dom
      function updateDom(arr) {
        //清除上次数据
        main.innerHTML = `<h2>
        <strong>Person</strong>
        <span>Wealth</span>
      </h2>`;
        arr.forEach((ele) => {
          let div = document.createElement("div");
          div.classList.add("person");
          div.innerHTML = `
            <strong>${ele.name}</strong>
            ${ele.money}
          `;
          main.appendChild(div);
        });
      }

      let add = document.querySelector("#add-user");
      add.addEventListener("click", function () {
        arr.push(dataInfo[i]);
        i++;
        updateDom(arr);
      });
      let Person = document.getElementsByTagName("strong");
      let Wealth = document.getElementsByTagName("span");
      let main = document.querySelector("#main");
      let dou = document.querySelector("#double");
      let show = document.getElementById("show-millionaire");
      let sort = document.getElementById("sort");
      let calculate = document.getElementById("calculate");
      dou.addEventListener("click", function () {
        arr.forEach(function (ele, index) {
          return (ele.money *= 2);
        });
        updateDom(arr);
      });
      show.addEventListener("click", function (ele) {
        arr = arr.filter(function (ele) {
          return ele.money > 1000000;
        });
        updateDom(arr);
      });
      sort.addEventListener("click", function () {
        arr = arr.sort(function (a, b) {
          return b.money - a.money;
        });
        updateDom(arr);
      });
      calculate.addEventListener("click", function () {
        let acc = arr.reduce(function (sum, ele, index) {
          return (sum += ele.money);
        }, 0);
        let div = document.createElement("div");
        div.innerHTML = `<h2>Total Sum:${acc}</h2>`;
        main.appendChild(div);
      });
      // let mill = document.getElementById("show-millionaire");
      // let sort = document.getElementById("sort");
      // let arr = [];
      // i = 0;
      // j = 0;
      // c = 0;
      // add.addEventListener("click", function () {
      //   if (main.children.length <= dataInfo.length) {
      //     let p = document.createElement("p");
      //     p.innerHTML = `<span>${dataInfo[i].name}</span><span>${dataInfo[i].money}</span>`;
      //     main.appendChild(p);
      //     dou.addEventListener("click", function () {
      //       let newmoney = dataInfo.map(function (ele, index) {
      //         return (ele.money *= 2);
      //       });
      //       p.children[1].innerHTML = `<span>${newmoney[j]}</span>`;
      //     });
      //     mill.addEventListener("click", function () {
      //       arr.push(dataInfo[c].money);
      //       let arr = dataInfo.filter(function (ele, index) {
      //         return ele > 1000000;
      //       });
      //       console.log(arr);
      //     });
      // sort.addEventListener("click", function () {
      //   arr.push(dataInfo[c].money);
      //   arr.sort(function (a, b) {
      //     return a - b;
      //   });

      //   p.innerHTML = `<span>${main.children[c]}</span>`;
      //   c++;
      //   console.log(arr);
      // });
      // i++;
      // }
      // });
    </script>
  </body>
</html>
